<template>
  <div id="waterStatiastics">
      <div class="left-table">
        <div class="table-item">
          <div class="inner-table">
            <div class="top-head">
              <span class="tangle"></span>
              <span>{{currentYear}}年度生产及消耗水量</span>
            </div>
            <div class="time-picker">
              <el-select v-model="productWaterSupply.year" placeholder="请选择" @change="getYear_productWaterSupply($event)">
                <el-option
                  v-for="item in commonYears"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="productWaterSupply.month" placeholder="请选择" @change="getMonth_productWaterSupply($event)">
                <el-option
                  v-for="item in commonMonth"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="chart">
               <IEcharts
                  :option="productWaterSupply.bar"
                  :loading="productWaterSupply.loading"
                  :resizable="true"
                /> 
            </div>
          </div>
        </div>
        <div class="table-item">
          <div class="inner-table">
            <div class="top-head">
              <span class="tangle"></span>
              <span>{{currentYear}}年度计划用水量</span>
            </div>
            <div class="time-picker">
              <el-select v-model="planWaterSupply.year" placeholder="请选择" @change="getYear_planWaterSupply($event)">
                <el-option
                  v-for="item in commonYears"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="planWaterSupply.month" placeholder="请选择" @change="getMonth_planWaterSupply($event)">
                <el-option
                  v-for="item in commonMonth"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="chart">
                <IEcharts
                  :option="planWaterSupply.bar"
                  :loading="planWaterSupply.loading"
                  :resizable="true"
                /> 
            </div>
          </div>
        </div>
         <div class="table-item">
          <div class="inner-table">
              <div class="top-head">
                <span class="tangle"></span>
                <span>{{currentYear}}年度实际用水量</span>
              </div>
              <div class="time-picker">
                <el-select v-model="realWaterSupply.year" placeholder="请选择" @change="getYear_realWaterSupply($event)">
                  <el-option
                    v-for="item in commonYears"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="realWaterSupply.month" placeholder="请选择" @change="getMonth_realWaterSupply($event)">
                  <el-option
                    v-for="item in commonMonth"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="chart">
                <IEcharts
                  :option="realWaterSupply.bar"
                  :loading="realWaterSupply.loading"
                  :resizable="true"
                /> 
              </div>
          </div>
        </div>
         <div class="table-item">
           <div class="inner-table">
              <div class="top-head">
                <span class="tangle"></span>
                <span>{{currentYear}}年度管网末梢余氯</span>
              </div>
              <div class="time-picker">
                <el-select v-model="left_cl.year" placeholder="请选择" @change="getYear_left_cl($event)">
                  <el-option
                    v-for="item in commonYears"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="left_cl.month" placeholder="请选择" @change="getMonth_left_cl($event)">
                  <el-option
                    v-for="item in commonMonth"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="chart">
                <IEcharts
                  :option="left_cl.bar"
                  :loading="left_cl.loading"
                  :resizable="true"
                /> 
              </div>      
           </div>
        </div>
         <div class="table-item">
          <div class="inner-table">
             <div class="top-head">
                <span class="tangle"></span>
                <span>{{currentYear}}年度平均压力</span>
              </div>
              <div class="time-picker">
                <el-select v-model="range_waterPress.year" placeholder="请选择" @change="getYear_range_waterPress($event)">
                  <el-option
                    v-for="item in commonYears"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="range_waterPress.month" placeholder="请选择" @change="getMonth_range_waterPress($event)">
                  <el-option
                    v-for="item in commonMonth"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="chart">
                <IEcharts
                  :option="range_waterPress.bar"
                  :loading="range_waterPress.loading"
                  :resizable="true"
                /> 
              </div>        
          </div>    
        </div>
         <div class="table-item">
          <div class="inner-table">
             <div class="top-head">
                <span class="tangle"></span>
                <span>{{currentYear}}年度管网水质PH值</span>
              </div>
              <div class="time-picker">
                <el-select v-model="ph.year" placeholder="请选择" @change="getYear_ph($event)">
                  <el-option
                    v-for="item in commonYears"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="ph.month" placeholder="请选择" @change="getMonth_ph($event)">
                  <el-option
                    v-for="item in commonMonth"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <div class="chart">
                <IEcharts
                  :option="ph.line"
                  :loading="ph.loading"
                  :resizable="true"
                /> 
              </div>        
          </div>  
        </div>
      </div>
      <div class="right-tree">
        <div class="top-head">
          <span>水投集团</span>
        </div>
        <div class="tree">
          <el-tree
          :data="waterFactory"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1, 2]"
          :default-checked-keys="[11]"
          :props="defaultProps">
        </el-tree>
        </div>
      </div>
  </div>
</template>

<script  >
import IEcharts from "vue-echarts-v3/src/full.js";
export default {
  name: "waterStatiastics",
  components: {
    IEcharts
  },
  data() {
    return {
      currentYear:"",
      waterFactory: [
        {
          id: 1,
          label: "中原水务",
          children: [
            {
              id: 11,
              label: "海兴"
            },
            {
              id: 12,
              label: "同心",
              children: [
                {
                  id: 121,
                  label: "同心东部"
                },
                {
                  id: 122,
                  label: "同心西部"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "六盘山水务",
          children: [
            {
              id: 21,
              label: "南郊水厂"
            },
            {
              id: 22,
              label: "二水厂"
            }
          ]
        },
        {
          id: 3,
          label: "中南部建设"
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      commonYears: [],
      commonMonth: [
        { value: 0, label: "全年" },
        { value: 1, label: "1月" },
        { value: 2, label: "2月" },
        { value: 3, label: "3月" },
        { value: 4, label: "4月" },
        { value: 5, label: "5月" },
        { value: 6, label: "6月" },
        { value: 7, label: "7月" },
        { value: 8, label: "8月" },
        { value: 9, label: "9月" },
        { value: 10, label: "10月" },
        { value: 11, label: "11月" },
        { value: 12, label: "12月" }
      ],
      productWaterSupply: {
        loading: false,
        year: "",
        month: "全年",
        bar: {
          tooltip: {},
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "45px"
          },
          xAxis: {
            show: true,
            data: ["生产水量", "销售水量", "公共用水量", "漏损水量"],
            axisLabel: {
              inteeval: 0,
              rotate: 30
            }
          },
          yAxis: {
            show: true,
            name: "(万m³)"
          },
          color: "#1cbbdf",
          series: [
            {
              name: "生产及消耗水量",
              type: "bar",
              barWidth: "20",
              data: [1150, 700, 500, 500]
            }
          ]
        }
      },
      planWaterSupply: {
        loading: false,
        year: "",
        month: "全年",
        bar: {
          tooltip: {},
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            show: true,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            show: true,
            name: "(万m³)"
          },
          color: "#1cbbdf",
          series: [
            {
              name: "计划用水量",
              type: "bar",
              data: [
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500
              ]
            }
          ]
        }
      },
      realWaterSupply: {
        year: "",
        month: "全年",
        loading: false,
        bar: {
          tooltip: {},
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            show: true,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            show: true,
            name: "(万m³)"
          },
          color: "#1cbbdf",
          series: [
            {
              name: "实际用水量",
              type: "bar",
              data: [
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500
              ]
            }
          ]
        }
      },
      left_cl: {
        year: "",
        month: "全年",
        loading: false,
        bar: {
          tooltip: {},
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            show: true,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            show: true,
            name: "(万m³)"
          },
          color: "#1cbbdf",
          series: [
            {
              name: "管网末梢余氯",
              type: "bar",
              data: [
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500
              ]
            }
          ]
        }
      },
      range_waterPress: {
        year: "",
        month: "全年",
        loading: false,
        bar: {
          tooltip: {},
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            show: true,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            show: true,
            name: "(万m³)"
          },
          color: "#1cbbdf",
          series: [
            {
              name: "平均压力",
              type: "bar",
              data: [
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500,
                1150,
                700,
                500,
                500
              ]
            }
          ]
        }
      },
      ph: {
        year: "",
        month: "全年",
        loading: false,
        line: {
          tooltip: {
            trigger: "axis"
          },
          grid: {
            top: "35px",
            left: "40px",
            right: "20px",
            bottom: "30px"
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12"
            ]
          },
          yAxis: {
            name: "(PH)",
            type: "value",
            splitLine: {
              show: true
            }
          },
          color: "#1cbbdf",
          series: [
            {
              data: [5, 5.7, 6.2, 7.8, 8.5, 9.2, 5.7, 8.2, 6.7, 9.2, 6.7, 8.3],
              type: "line",
              areaStyle: {
                normal: {
                  type: "default",
                  color: "#a4d8cc"
                }
              },
              smooth: false,
              itemStyle: {
                normal: { areaStyle: { type: "default" } }
              }
            }
          ]
        }
      }
    };
  },
  methods: {
    handleCommand(command) {
      this.$message("click on item " + command);
    },
    years() {
      let temp = [];
      let currentYear = parseInt(new Date().getFullYear());
      let startYear = 1970;
      let D_year = currentYear - startYear;
      for (let i = 0; i < D_year; i++) {
        temp.push({
          value: currentYear - i,
          label: currentYear - i + "年"
        });
      }
      return temp;
    },
    getYear_productWaterSupply(event) {
      this.productWaterSupply.year = event;
    },
    getMonth_productWaterSupply(event) {
      this.productWaterSupply.month = event;
    },
    getYear_planWaterSupply(event) {
      this.planWaterSupply.year = event;
    },
    getMonth_planWaterSupply(event) {
      this.planWaterSupply.month = event;
    },
    getYear_realWaterSupply(event) {
      this.realWaterSupply.year = event;
    },
    getMonth_realWaterSupply(event) {
      this.realWaterSupply.month = event;
    },
    getYear_left_cl(event) {
      this.left_cl.year = event;
    },
    getMonth_left_cl(event) {
      this.left_cl.month = event;
    },
    getYear_range_waterPress(event) {
      this.range_waterPress.year = event;
    },
    getMonth_range_waterPress(event) {
      this.range_waterPress.month = event;
    },
    getYear_ph(event) {
      this.ph.year = event;
    },
    getMonth_ph(event) {
      this.ph.month = event;
    }
  },
  created() {
    let currentYear = new Date().getFullYear();
    this.currentYear = currentYear;
    let temp = this.years();
    this.commonYears = temp;
    this.productWaterSupply.year = currentYear;
    this.planWaterSupply.year = currentYear;
    this.realWaterSupply.year = currentYear;
    this.left_cl.year = currentYear;
    this.range_waterPress.year = currentYear;
    this.ph.year = currentYear;
  }
};
</script>
<style  lang="scss" scoped>
* {
  box-sizing: border-box;
}
#waterStatiastics {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  .left-table {
    width: 82.5%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .table-item {
      width: 32%;
      height: 50%;
      padding-bottom: 2%;
      .inner-table {
        border: 1px solid #fff;
        height: 100%;
        background: #fff;
        .top-head {
          width: 100%;
          height: 25px;
          line-height: 25px;
          border-bottom: 1px solid #ccc;
          padding-left: 20px;
          font-size: 14px;
          color: #333;
          .tangle {
            display: inline-block;
            width: 12px;
            height: 12px;
            background: blue;
            margin-right: 10px;
          }
        }
        .time-picker {
          width: 100%;
          padding: 10px;
          height: 40px;
          padding: 10px;
          display: flex;
          justify-content: flex-end;
          .el-select {
            width: 100px;
            margin-right: 10px;
          }
        }
        .chart {
          width: 100%;
          height: calc(100% - 65px);
        }
      }
    }
  }
  .right-tree {
    width: 16%;
    height: 100%;
    border: 1px solid #fff;
    background: #fff;
    .top-head {
      width: 100%;
      height: 25px;
      line-height: 25px;
      border-bottom: 1px solid #fff;
      padding: 0 10px;
      font-size: 14px;
      color: #fff;
      font-weight: 600;
      background: rgb(132, 132, 236);
    }
    .tree {
      width: 100%;
      height: calc(100% - 25px);
      overflow-y: auto;
    }
  }
}
</style>